<template>
	<div class="all">
		<div v-if="list != ''">
			<div class="name hei da">请选择套餐</div>
			<div class="con">
				<van-radio-group v-model="radio">
					<van-cell-group>
						<van-cell :title="item.title" clickable @click="radio = item.id" v-for="item in list"
							:key="item.id">
							<template #right-icon>
								<van-radio :name="item.id" />
							</template>
						</van-cell>
					</van-cell-group>
				</van-radio-group>
			</div>


			<div :class="ke?'k2 btn':'k2 btn btn2'" v-if="!chongzhizhong" @click="goumai">确定</div>
			<div :class="ke?'k2 btn':'k2 btn btn2'" v-if="chongzhizhong">付款中...</div>
			<div class="red l1">* 购买流量加油包须知</div>

			<div class="hei l2"> 流量加油包有效期为：当月27日0点至次月26日24点，到期清零</div>
		</div>
		<div v-if="list == ''" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
			暂无加油包
		</div>

		<van-popup v-model="ing">
			<van-loading size="24px" color="#fff" vertical>加载中...</van-loading>
		</van-popup>
	</div>
</template>

<script>
	import axios from 'axios'
	import bus from '@/assets/bus.js'
	export default {
		name: 'jiayoubao',
		data() {
			return {
				value: "",
				ke: true,
				radio: '',
				list: {
					list: []
				},
				ing: true,
				chongzhizhong: false
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {
			this.getjiayoubao()
		},
		methods: {
			goumai: function() {
				let that = this
				this.chongzhizhong = true
				this.axios.post(this.url + `/mobile/api/buyAddFlow?iccid=` + this.$route.query.canshu +
						`&package_id=${this.radio}`)
					.then(response => {
						if (response.data.success == true) {
							if (response.data.code == 300) {
								//吊起支付
								this.axios.post(this.url + `/mobile/api/wechatPay?price=` + response.data.result +
										`&title=买流量包&is_pre=4&iccid=` + this.$route.query.canshu +
										`&package_id=${this.radio}`)
									.then(response => {
										WeixinJSBridge.invoke(
											'getBrandWCPayRequest', {
												"appId": response.data.result.appId,
												'timeStamp': response.data.result.timeStamp,
												'nonceStr': response.data.result.nonceStr,
												'package': response.data.result.package,
												'signType': "MD5",
												'paySign': response.data.result.paySign,
											},
											function(res) {
												if (res.err_msg == "get_brand_wcpay_request:ok") {
													that.$toast('付款成功！');
													setTimeout(() => {
														that.$router.push('/')
													}, 1000)
												} else {
													that.$router.push('/')
												}
											});
									})
							} else {
								this.$toast('购买成功！');
								setTimeout(() => {
									this.$router.push('/')
								}, 1000)
							}
						} else {
							this.chongzhizhong = false
							this.$toast(response.data.message);
						}
					})
			},
			getjiayoubao: function() {
				this.axios.get(this.url + `/mobile/api/getAddFlowList`)
					.then(response => {
						if (response.data.success == true) {
							this.list = response.data.result
							this.radio = response.data.result[0].id
							this.ing = false
						} else {
							this.$toast(response.data.message);
							this.ing = false
						}
					})
			},
		},

	}
</script>

<style scoped lang="less">
	.van-popup {
		background: transparent;
	}

	.all {
		background: #FFFFFF;
		font-size: 0.28rem;
		min-height: 100vh;

		.name {
			font-weight: bold;
		}

		.van-cell {
			padding: 0.3rem 0;
		}

		.con {
			margin-top: 20px;
		}

		.k2 {
			margin: 0.6rem 0;
		}

		.btn2 {
			background: #EDEDED !important;
			color: #A9A9A9 !important;
		}

		.l1 {
			color: #FF6367;
			font-size: 0.28rem;
			margin-bottom: 0.2rem;
		}

		.l2 {
			margin-bottom: 0.1rem;
		}

		.van-cell:not(:last-child)::after {
			left: 0;
		}
	}
</style>
